<template>
  <el-drawer v-model="isShow" :title="title" :size="size" :destroy-on-close="destroyOnClose">
    <template #default>
      <slot></slot>
    </template>

    <template #footer>
      <div class="btn-box">
        <el-button type="primary" v-model:loading="isLoading" @click="handleSubmit">
          {{ btnText }}
        </el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
// 模块引入
// import { ref } from 'vue'
import { MsgBoxEnum } from '../../enum'

defineOptions({
  name: 'FormDrawer',
  inheritAttrs: true
})
// 定义一个响应式变量，用于控制抽屉的显示与隐藏
// const isShow = ref<boolean>(false)
const isShow = defineModel<boolean>('isShow')
const isLoading = defineModel<boolean>('isLoading')

// 定义一个响应式变量，用于控制加载状态的显示与隐藏
// const isLoading = ref<boolean>(false)

interface IProps {
  title?: string
  btnText?: string
  size?: string
  destroyOnClose?: boolean
}
// 定义组件的props，用于接收父组件传递的参数
withDefaults(defineProps<IProps>(), {
  title: '增加',
  btnText: '提交',
  size: '30%',
  destroyOnClose: false
})
// defineProps({
//   title: {
//     type: String,
//     default: '增加'
//   },
//   btnText: {
//     type: String,
//     default: '提交'
//   },
//   size: {
//     type: String,
//     default: '30%'
//   },
//   destroyOnClose: {
//     type: Boolean,
//     default: false
//   }
// })

// 定义一个方法，用于显示加载状态

const showLoading = () => (isLoading.value = true)

// 定义一个方法，用于隐藏加载状态
const hideLoading = () => (isLoading.value = false)

// 定义组件的emits，用于向父组件传递事件
const emit = defineEmits(['handle-submit', 'handle-open'])
// 定义一个方法，用于向父组件传递handleSubmit事件
const handleSubmit = () => emit('handle-submit')

// 定义一个方法，用于打开抽屉
const open = () => (isShow.value = true)

// 定义一个方法，用于关闭抽屉
const close = () => {
  const fn = () => {
    isLoading.value = false
    isShow.value = false
  }
  // fn()
  window.$msgBoxTip(fn, MsgBoxEnum.exit)
}

// 将open、close、showLoading、hideLoading方法暴露给父组件
defineExpose({
  open,
  close,
  showLoading,
  hideLoading
})
</script>

<style scoped lang="scss">
.el-icon.el-message-box__status {
  color: red;
}
</style>
